<template>
	<view class="my-photo">
		<view class="my-photo-item" v-for="item in list" :key="item.photoAlbumId">
			<text class="my-photo-item-text">今天</text>
			<view class="my-photo-item-grid">
				<view class="my-photo-item-image">
					<view class="my-photo-item-image-bg">
						<image v-if="item.photoType!=1" :src="item.photoUrl+'?x-oss-process=video/snapshot,t_1,m_fast'"
							mode="aspectFill"></image>
						<image :src="item.photoUrl" mode="aspectFill" v-else>
						</image>
						<image src="/static/image/findPet/upload.png" mode="" class="upload"></image>
						<view class="video" v-if="item.photoType==2">
							<image src="/static/image/findPet/play.png" mode=""></image>
							<text>20:20</text>
						</view>

					</view>

				</view>
			</view>

		</view>

	</view>

</template>

<script setup>
	defineProps(['list', 'photoType'])
	const toDel = () => {
		uni.navigateTo({
			url: '/pages/FindPet/delAlbum'
		})
	}
</script>

<style lang="scss" scoped>
	.my-photo {
		background-color: #f5f8fb;
		display: flex;
		flex-direction: column;
		padding: 32rpx;
		padding-top: 0;
		box-sizing: border-box;
		// border: 1px solid red;
		// height: calc(100% - 88px);
		position: relative;


		.my-photo-item {
			margin-top: 40rpx;

			.my-photo-item-text {
				font-weight: 600;
				font-size: 28rpx;
				// margin-bottom: 30rpx;
			}


			.my-photo-item-grid {

				margin-top: 40rpx;
				width: 100%;
				box-sizing: border-box;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				gap: 10px;
				// border: 1px solid;
				padding-bottom: 40rpx;
				// border-bottom: 4px solid #eef1f4;

				.my-photo-item-image {

					display: flex;
					flex-direction: column;

					// display: grid;
					.my-photo-item-image-bg {
						width: 100%;
						// border: 1px solid red;
						background-color: #e5e5e5;
						// border-radius: 15rpx;
						height: 110px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						border-radius: 15rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 15rpx;
							// width: 30rpx;
							// height: 30rpx;
						}

						.upload {
							position: absolute;
							right: 0;
							top: 0;
							width: 40rpx;
							height: 40rpx;
						}

						.video {
							position: absolute;
							left: 0;
							bottom: 10rpx;

							// width: 40rpx;
							// height: 40rpx;
							display: flex;
							align-items: center;

							text {
								font-size: 20rpx;
								margin-left: 10rpx;
								color: #fff;
							}

							image {
								width: 30rpx;
								height: 30rpx;
							}

						}

						.checkbox {
							position: absolute;
							right: 0;
							bottom: 0;
						}
					}



				}
			}

		}
	}
</style>